<template>
  <div class="outer">
    <h1>App</h1>
    <input type="text" ref="mes">
    <button @click="showMes">展示输入框的内容</button>
    <hr />
    <Header ref="header"></Header>
    <button @click="handler">按钮</button>
  </div>
</template>

<script>
import Header from '@/components/Header'
// 创建并暴漏组件
export default {
  name: 'App',
  components: {
    Header
  },
  methods: {
    showMes() {
      /* 
          ref属性
            被用来给元素或者子组件注册引用信息，引用信息将会注册在父组件实例的 $refs 对象上
            如果在普通的DOM元素上使用 引用指向的就是DOM元素（如果以后考虑获取真实DOM则可以使用ref）
            如果用在子组件上，引用就指向组件实例，其实也是未来组件通信的一种方式
            注意事项
              因为ref本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 它们还不存在
              $refs 也不是响应式的 因此不应该试图用它在模板中做数据绑定
      */
      console.log(this)
      console.log(this.$refs.mes)
      console.log(this.$refs.mes.value)
    },
    handler() {
      console.log(this.$refs.header)
      this.$refs.header.count++
    }
  }
}
</script>

<style>
</style>